<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>梦幻空间-角色编辑</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="content-type" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
</head>
<link rel="stylesheet" href="resources/css/mdui.min.css"/>
<style>
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    .rotating-element {
        animation: rotate 2s linear infinite;
    }
    @font-face {
        font-family: "title_font";
        src: url("resources/MiSans-Regular.woff") format("truetype");
    }
    *{
        font-family: "title_font";
    }
    body{
        background-color: #fafaf9;
    }
    a{
        text-decoration: none;
        margin-top: auto;
        margin-bottom: auto;
    }
    body{
        margin-top: 0px;
        margin-left: 0px;
    }
    .top{
        width: 100vw;
        height: 50px;
        background-color: #80CBC4;
        position: fixed;
        z-index: 999;
        display: flex;
    }
    .top_main{
        margin-top: auto;
        margin-bottom: auto;
        display: flex;
        width:80%;
        height: 90%;
        margin: auto;
    }
    .top_main h3{
        font-size: 20px;
        margin: unset;
        margin-top: auto;
        margin-bottom: auto;
    }
    .page{
        margin-left: 20vw;
        margin-top: 50px;
    }
    .left_box{
        width: 20vw;
        height: 100vh;
        background-color: #E0F2F1;
        margin-top: 0px;
        padding-top: 30px;
        position: fixed;
        top: 0px
    }
    .left_box a{
        text-decoration: none;
        color: black;
    }
    .lb_btn p{
        margin-left: 30px;
    }
    .lb_btn{
        padding: 5px;
    }
    .lb_btn:hover{
        background-color: rgb(200,200,200);
    }
    .main{
        width: 100vw;
        display: flex;
    }
</style>

<style>
    select{
        margin-top: auto;
        margin-bottom: auto;
    }
    .page{
        width: 80vw;
        display: flex;
    }
    .page_main{
        width: 90%;
        margin: auto;
        margin-top: 20px;
    }
    .inf_pMain{
        display: flex;
    }
    .inf_banner{
        width: 120px;
    }
    .inf_banner img{
        width: 120px;
        height: 120px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    }
    .inf_banner select{
        width: 120px;
    }
    .inf_input{
        display: block;
        margin-left: 50px;
    }
    .nameInput{
        width: 300px;
        height: 30px;
        border-radius: 10px;
    }
    .inf_input textarea{
        width: 300px;
        height: 100px;
    }
</style>

<style>
    .dialog_card_bar{
        padding: 20px;
        width:100%;
    }
    .dialog_card{
        box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
        background-color: #EEEEEE;
        border-radius: 20px;
        min-height: 100px;
        margin: 15px;
    }
    .tb_b{
        margin-top: auto;
        margin-bottom: auto;
    }
    .t_input{
        border: none;
        /* background-color: unset; */
        height: 20px;
        margin-top: auto;
        margin-bottom: auto;
        margin-left: 10px;
    }
    .char_aSET{
        padding: 10px;
        margin-top: auto;
        margin-bottom:auto;
    }
    .dialog_item{
        display: flex;
    }
    .addBtn{
        width: 100%;
        height: 40px;
        display: flex;
    }
    .addBtn:hover{
        background-color: rgb(200,200,200);
    }
    .addBtn p{
        margin: auto;
        text-align: center;
        color: black;
    }

    .action_btn{
        width: 90px;
        height: 30px;
        border-radius: 20px;
        background-color: #26A69A;
        display: flex;
        margin: 5px;
    }
    .action_btn img{
        width: 20px;
        height: 20px;
        margin-top: auto;
        margin-bottom: auto;
    }
    .action_btn p{
        color: white;
        margin-top: auto;
        margin-bottom: auto;
        margin-left: 5px;
    }
</style>

<div class="top">
    <div class="top_main">
        <h3>角色编辑</h3>
        <a style="margin-left: auto;" href="javascript:void(0);" onclick="push_char()">
            <div class="action_btn">
                <div style="display: flex;margin:auto;">
                    <img id="push_ico" src="resources/push.png">
                    <p>发布</p>
                </div>
            </div>
        </a>
        <a href="javascript:void(0);" onclick="save_change()">
            <div class="action_btn">
                <div style="display: flex;margin:auto;">
                    <img id="save_ico" src="resources/save.png">
                    <p>保存</p>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="main">
    <div class="left_box">
        <a href="javascript:void(0);" onclick="change_card(0)">
            <div class="lb_btn" style="margin-top: 100px;">
                <p>基本信息编辑</p>
            </div>
        </a>
        <a href="javascript:void(0);" onclick="change_card(1)">
            <div class="lb_btn">
                <p>对话编辑</p>
            </div>
        </a>
        <a href="javascript:void(0);" onclick="change_card(2)">
            <div class="lb_btn">
                <p>对话触发编辑</p>
            </div>
        </a>
    </div>

    <div class="inf_page page" id="inf_page" style="display: block;">
        <div class="inf_pMain page_main">
            <div class="inf_banner">
                <a href="javascript:void(0);" onclick="change_banner(this)"><img id="char_banner" src="/wpp_logo.png"></a>
            </div>
            <div class="inf_input">
                <div style="display: flex;">
                    <p>角色名称：</p>
                    <input style="margin-top: auto;margin-bottom: auto;" class="nameInput" onchange="change_charData('char_name',this.value)" id="name_input">
                </div>
                <div style="display: flex;">
                    <p>自定义ID：</p>
                    <input style="margin-top: auto;margin-bottom: auto;" class="nameInput" onchange="change_charData('char_id',this.value)" id="id_input">
                </div>
                <p>简介：</p>
                <textarea class="introduce_input" onchange="change_charData('introduce',this.value)" id="i_input"></textarea>
                <div style="display:flex;">
                    <p>字体颜色：</p>
                    <input onchange="change_charData('font_color',this.value)" style="margin-top: auto;margin-bottom:auto;" class="color_input" id="Charcolor_input" type="color">
                </div>
                <div style="display:flex;">
                    <p>边框颜色：</p>
                    <input onchange="change_charData('border_color',this.value)" style="margin-top: auto;margin-bottom:auto;" class="color_input" id="color_input" type="color">
                </div>
                <div style="display:flex;">
                    <p>背景颜色：</p>
                    <input onchange="change_charData('bg_color',this.value)" style="margin-top: auto;margin-bottom:auto;" class="color_input" id="BGcolor_input" type="color" value="#FFFFFF">
                </div>
            </div>
        </div>
    </div>

    <div class="dialog_page page" id="dialog_page" style="display: none;">
        <div class="dialog_Main page_main">
            <div class="dialog_top" style="display: flex;height:30px;">
                <p>已创建对话0个</p>
                <button style="height: 20px;margin-left:auto;margin-top: auto;margin-bottom: auto;" onclick="create_dialog()">+</button>
            </div>
            <div class="dialog_card_bar" id="dialog_cards">
                <!-- <div class="dialog_card">
                    <div class="n_V" style="display: flex;margin-left: 30px;">
                        <p>名称</p>
                        <input class="t_input" id="dn_input">
                        <audio controls class="tb_b" src="/卡哇伊demo.wav" style="margin-left: auto;"></audio>
                        <input class="tb_b mp3_input" type="file">
                    </div>
                    <div class="dialog_items_box" id="dialog_items">
                        <div class="dialog_item" style="display: flex;">
                            <div style="margin: auto;display: flex;">
                                <div class="char_aSET" style="display: block;">
                                    <a href="javascript:void(0);"><img src="" width="60px" height="60px"></a>
                                </div>
                                <div class="char_aSET" style="display: block;">
                                    <p>时长</p>
                                    <input class="t_input" style="width: 50px;" type="number">
                                </div>
                                <div class="char_aSET" style="display: block;">
                                    <p>内容</p>
                                    <input class="t_input" style="width: 300px;" type="text">
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</div>

<style>
    .cf_page{
        margin-top: 100px;
    }
    .cf_box{
        border-radius: 20px;
        background-color: rgb(240,240,240);
        width: 100%;
    }
    .cf_top{
        display: flex;
        width: 80%;
        margin: auto;
    }
    .cf_top button{
        margin-top: auto;
        margin-bottom: auto;
        height: 20px;
    }
    .cf{
        display: flex;
    }

</style>
<script src="resources/js/mdui.min.js"></script>
<div class="cf_page page" id="cf_page" style="display:none;">
    <div class="page_main">
        <div class="cf_box" style="display: block;">
            <div class="cf_top">
                <p>触发条件设置</p>
                <button style="margin-left: auto;" onclick="create_cf()">+</button>
            </div>
            <div style="width: 100%;display: flex;">
                <div style="display: flex;margin:auto;">
                    <div style="width: 120px;">
                        <p>类型</p>
                    </div>
                    <div style="width: 120px;">
                        <p>设定</p>
                    </div>
                    <div style="width: 180px;">
                        <p>动作</p>
                    </div>
                    <div style="width: 100px;">
                        <p>触发概率%</p>
                    </div>
                    <div style="width: 60px;">
                        <p>操作</p>
                    </div>
                </div>
            </div>
            <div class="cf_bar" id="cf_bar">
            </div>
        </div>
    </div>
</div>
<div id="confirmPushDialog" class="mdui-dialog" style="display: none; border-radius: 16px; max-width: 500px;">
    <div class="mdui-dialog-title" style="font-size: 20px; font-weight: bold;">确认发布角色</div>
    <div class="mdui-dialog-content" style="padding: 20px;">
        <div style="margin-bottom: 20px;">
            <p style="font-weight: bold; margin-bottom: 5px;">角色名称:</p>
            <div style="background-color: #f5f5f5; padding: 10px; border-radius: 8px;" id="confirmCharName"></div>
        </div>
        <div>
            <p style="font-weight: bold; margin-bottom: 5px;">角色简介:</p>
            <div style="background-color: #f5f5f5; padding: 10px; border-radius: 8px; min-height: 80px;" id="confirmCharIntro"></div>
        </div>
        <p style="margin-top: 15px; color: #666; font-size: 14px;">确认发布后，您的角色将被上传到服务器。</p>
    </div>
    <div class="mdui-dialog-actions" style="padding: 0 20px 20px 20px; justify-content: flex-end;">
        <button class="mdui-btn mdui-ripple" style="margin-right: 10px;" mdui-dialog-cancel>取消</button>
        <button class="mdui-btn mdui-ripple mdui-color-theme" id="confirmPushBtn">确认发布</button>
    </div>
</div>
<div id="publishingDialog" class="mdui-dialog" style="display: none; border-radius: 16px; max-width: 400px; text-align: center;">
    <div class="mdui-dialog-content" style="padding: 30px 20px;">
        <div class="rotating-element" style="margin: 0 auto; width: 50px; height: 50px;">
            <img src="resources/loading_green.png" style="width: 100%; height: 100%;">
        </div>
        <h3 style="margin-top: 20px; margin-bottom: 10px;">正在发布角色...</h3>
        <p id="publishingStatus" style="color: #666;">请稍候，这可能需要一些时间</p>
    </div>
</div>
<script>
    part_e={
        "save":document.getElementById("save_ico"),
        "push":document.getElementById("push_ico")
    }
    part_sre={
        "save":"resources/save.png",
        "push":"resources/push.png"
    }
    async function loading(part){
        tar_e = part_e[part]
        tar_e.className="rotating-element"
        tar_e.src="resources/loading_ico.png"
    }
    async function clearLoading(part){
        tar_e = part_e[part]
        tar_e.className=""
        tar_e.src=part_sre[part]
    }
    async function src_to_path(url){
        var url_list = url.split("/")
        var out_path = "./"
        var tar_index = url_list.indexOf("char")+2
        for(i=tar_index;i<url_list.length;i++){
            out_path+=url_list[i]+"/"
        }
        return out_path
    }
    action_match={"TimeHello":"TimeHello","weather":"天气对话","timeMatch":"达到时间"}
    action_match_back={"TimeHello":"TimeHello","天气对话":"weather","到达时间":"timeMatch"}
    async function change_card(pid){
        await dialog_editSave()
        await cf_save()
        await start_load()
        document.getElementById("inf_page").style.display="none"
        document.getElementById("dialog_page").style.display="none"
        document.getElementById("cf_page").style.display="none"
        if(pid==0){
            document.getElementById("inf_page").style.display="block"
        }else if(pid==1){
            document.getElementById("dialog_page").style.display="block"
        }else if(pid==2){
            document.getElementById("cf_page").style.display="block"
            load_cfPage()
        }
    }
    charData = null
    const dialog_cards = document.getElementById("dialog_cards")
    async function changeCharImage(e){
        img_path = await window.pywebview.api.file_select("image")
        if(img_path["success"]==true){
            e.children[0].src=img_path["data"]
        }
    }
    async function select_voice(e){
        voice_path = await window.pywebview.api.file_select("audio")
        if(voice_path["success"]==true){
            e.parentElement.children[2].src=voice_path["data"]
        }
    }
    function remove_dialogItem(e,dialog_id,item_id){
        charData["chat"][dialog_id]["content"].splice(item_id,1)
        e.parentElement.parentElement.parentElement.remove()
    }
    function remove_dialog(e,dialog_id){
        delete charData["chat"][dialog_id]
        e.parentElement.parentElement.remove()
    }
    async function create_dialogItems(char_image,voice_time,msg,dialog_id,item_id,dialogItemBox){
        new_dialog_item = document.createElement("div")
        new_dialog_item.className="dialog_item"
        new_dialog_item.innerHTML=`
        <div style="margin: auto;display: flex;">
            <div class="char_aSET" style="display: block;">
                <a href="javascript:void(0);" id="char_image" onclick="changeCharImage(this)"><img src="${char_image}" width="60px" height="60px"></a>
            </div>
            <div class="char_aSET" style="display: block;">
                <p>时长</p>
                <input class="t_input" type="number" style="width: 50px;" type="number" value="${voice_time}">
            </div>
            <div class="char_aSET" style="display: block;">
                <p>内容</p>
                <input class="t_input" style="width: 300px;" type="text" value="${msg}">
            </div>
            <div class="char_aSET" style="display: block;">
                <p>操作</p>
                <button onclick="remove_dialogItem(this,'${dialog_id}',${item_id})">删除</button>
            </div>
        </div>
        `
        dialogItemBox.appendChild(new_dialog_item)
    }
    async function create_new_item(e,dialog_id,item_id){
        if(item_id=="new"){
            item_id = charData["chat"][dialog_id]["content"].length
        }
        var new_data={"time":0,"msg":{"char_img":document.getElementById("char_banner").src,"msg":[""]}}
        charData["chat"][dialog_id]["content"].push(new_data)
        create_dialogItems(new_data["msg"]["char_img"],new_data["time"],new_data["msg"]["msg"],dialog_id,item_id,e.parentElement.children[1])
    }
    async function create_wmmName(){
        var name = "未命名"
        while (true){
            if(name in charData["chat"]){
                name+="-1"
            }else{
                break
            }
        }
        return name
    }
    dialog_type_options={
        "普通对话":"common",
        "生日对话":"birthday",
        "天气对话：晴":"weather_sunny",
        "天气对话：雨":"weather_rain",
        "天气对话：雷":"weather_thunderstorm",
        "天气对话：雪":"weather_snow",
        "天气对话：阴":"weather_cloudy",
        "时间段触发对话: 6-11":"th_6-11",
        "时间段触发对话: 11-14":"th_11-14",
        "时间段触发对话: 14-18":"th_14-18",
        "时间段触发对话: 18-22":"th_18-22",
        "时间段触发对话: 22-6":"th_22-6"
    }
    dialog_type_options_html=""
    for(dto in dialog_type_options){
        dialog_type_options_html+=`<option>${dto}</option>`
    }
    async function create_dialog(){
        new_item = document.createElement("div")
        new_item.className="dialog_card"
        wmmName = await create_wmmName()
        charData["chat"][wmmName]={
            "voice":"",
            "voice_time":"",
            "content":[]
        }
        new_itemsBox = document.createElement("div")
        new_itemsBox.className="dialog_items_box"
        new_item.innerHTML=`
        <div class="n_V" style="display: flex;margin-left: 30px;">
            <p>名称</p>
            <input class="t_input" id="dn_input" value="${wmmName}">
            <audio controls class="tb_b" src="" style="margin-left: auto;"></audio>
            <button class="tb_b mp3_input" onclick="select_voice(this)">选择</button>
            <select>${dialog_type_options_html}</select>
            <a href="javascript:void(0);" style="color:rbg(255,0,0);margin-left:30px;margin-right:30px;color:red;" onclick="remove_dialog(this,'${wmmName}')">删除</a>
        </div>
        `
        new_item.appendChild(new_itemsBox)
        new_addBtn=document.createElement("a")
        new_addBtn.onclick=function(){
            create_new_item(this,wmmName,"new")
        }
        new_addBtn.innerHTML=`<div class="addBtn"><p>+ 添加</p></div>`
        new_item.appendChild(new_addBtn)
        dialog_cards.appendChild(new_item)
    }
    aOption_html=""
    async function set_infType(e){
        var iType = inf_typeMatch[e.value]
        if(iType=="null"){
            e.parentElement.parentElement.children[1].innerHTML='<p style="width: 103px;margin:unset;margin-left:10px;">---</p>'
        }else{
            e.parentElement.parentElement.children[1].innerHTML=`<input class="t_input" style="width: 100px;" type="${iType}">`
        }
        // e.parentElement.parentElement.children[1].children[0].type=inf_typeMatch[e.value]
    }
    async function del_cf(e,cid){
        charData["rule"].splice(cid,1)
        e.parentElement.parentElement.parentElement.remove()
    }
    action_match_back = {"TimeHello":"TimeHello","天气对话":"weather","无操作":null}
    async function start_load(){
        result_list=["无操作","TimeHello","天气对话"]
        for(d in charData["chat"]){
            result_list.push("播放对话: "+d)
            action_match["play-chat:"+d]="播放对话: "+d
            action_match_back["播放对话: "+d]="play-chat:"+d
        }
        aOption_html=""
        for(rl of result_list){
            aOption_html+=`<option>${rl}</option>`
            console.log("play-chat:"+rl)
        }
        // 对话编辑界面加载
        dialog_cards.innerHTML=""
        for(aa in charData['chat']){
            this_item = charData['chat'][aa]
            new_item = document.createElement("div")
            new_item.className="dialog_card"

            type_name = "普通对话"
            for(n in dialog_type_options){
                if(dialog_type_options[n]==this_item["type"]){
                    console.log(dialog_type_options[n])
                    console.log(this_item["type"])
                    console.log("________")
                    type_name=n
                    break
                }
            }

            new_item.innerHTML=`
            <div class="n_V" style="display: flex;margin-left: 30px;">
                <p>名称</p>
                <input class="t_input" id="dn_input" value="${aa}">
                <audio controls class="tb_b" src="${"./char/"+charData["char_id"]+this_item["voice"]}" style="margin-left: auto;"></audio>
                <button style="height:20px;" class="tb_b mp3_input" onclick="select_voice(this)">选择</button>
                <select style="height:20px;">${dialog_type_options_html}</select>
                <a href="javascript:void(0);" style="color:rbg(255,0,0);margin-left:30px;margin-right:30px;color:red;" onclick="remove_dialog(this,'${aa}')">删除</a>
            </div>
            `
            new_item.children[0].children[4].value=type_name
            new_dialog_itemsBox = document.createElement("div")
            new_dialog_itemsBox.className="dialog_items_box"
            aaa_count=0
            for(aaa of this_item["content"]){
                // this_content = this_item["content"][aaa]
                await create_dialogItems("./char/"+charData["char_id"]+aaa["msg"]["char_img"],aaa["time"],aaa["msg"]["msg"],aa,aaa_count,new_dialog_itemsBox)
                aaa_count+=1
            }
            new_item.appendChild(new_dialog_itemsBox)
            new_addBtn=document.createElement("a")
            // new_addBtn.className=""
            // new_addBtn.href="javascript:void(0);"
            // new_addBtn.outerHTML=`
            // <a href="javascript:void(0);" onclick="create_new_item(this,'${aa}',${aaa_count})">
            // `
            new_addBtn.onclick=function(){
                create_new_item(this,aa,aaa_count)
            }
            // document.createElement().outerHTML
            new_addBtn.innerHTML=`<div class="addBtn"><p>+ 添加</p></div>`
            new_item.appendChild(new_addBtn)
            dialog_cards.appendChild(new_item)
        }
        load_cfPage()
    }
    async function create_newCF(cf_type,inf_type,inf,action,gl,cid){
        if(cf_type=="when_start" || cf_type=="timeMatch"){
            inf_eW = "103"
        }else{
            inf_eW = "100"
        }
        if(inf_type=="null"){
            inf_html = `<p style="width: ${inf_eW}px;margin:unset;margin-left:10px;">---</p>`
        }else{
            inf_html = `<input class="t_input" style="width: 100px;" type="${inf_type}" value="${inf}">`
        }
        new_cf=document.createElement("div")
        new_cf.className="cf"
        console.log(aOption_html)
        new_cf.innerHTML=`
        <div style="display: flex;margin:auto;">
            <div class="char_aSET" style="display: block;margin: unset;padding: unset;padding-right: 20px;">
                <select style="width: 100px;" id="cf_select" onchange="set_infType(this)">${options_html}</select>
            </div>
            <div class="char_aSET" style="display: block;margin: unset;padding: unset;padding-right: 20px;">
                ${inf_html}
            </div>
            <div class="char_aSET" style="display: block;margin: unset;padding: unset;padding-right: 20px;">
                <select style="width: 160px;" id="action_select">${aOption_html}</select>
            </div>
            <div class="char_aSET" style="display: block;margin: unset;padding: unset;padding-right: 20px;">
                <input style="width: 80px;" class="t_input" id="cfgl_input" style="width: 50px;" value="${gl}" type="number">
            </div>
            <div class="char_aSET" style="display: block;margin: unset;padding: unset;padding-right: 20px;">
                <button onclick="del_cf(this,${cid})">删除</button>
            </div>
        </div>
        `
        new_cf.children[0].children[0].children[0].value=options_match[cf_type]
        console.log(action)
        new_cf.children[0].children[2].children[0].value=action_match[action]
        cf_bar.appendChild(new_cf)
    }
    cf_bar = document.getElementById("cf_bar")
    options_list = ["开启时","达到时间","指定窗口获焦(完全匹配)","指定窗口获焦(含关键词)","特定日期","用户生日"]
    options_match={
        "when_start":"开启时",
        "timeMatch":"达到时间",
        "win_titleAllMatch":"指定窗口获焦(完全匹配)",
        "win_titleMatch":"指定窗口获焦(含关键词)",
        "specificDate":"特定日期",
        "birthday":"用户生日"
    }
    options_match_back={
        "开启时":"when_start",
        "达到时间":"timeMatch",
        "指定窗口获焦(完全匹配)":"win_titleAllMatch",
        "指定窗口获焦(含关键词)":"win_titleMatch",
        "特定日期":"specificDate",
        "用户生日":"birthday"
    }
    inf_typeMatch={
        "开启时":"null",
        "达到时间":"time",
        "指定窗口获焦(完全匹配)":"text",
        "指定窗口获焦(含关键词)":"text",
        "特定日期":"date",
        "用户生日":"null"

    }
    async function load_cfPage(){
        // 触发设置加载
        document.getElementById("cf_bar").innerHTML=""
        options_html = ""
        for(op of options_list){
            options_html+=`<option>${op}</option>`
        }
        cid_count = 0
        for(cf_obj of charData["rule"]){
            create_newCF(cf_obj["type"],inf_typeMatch[options_match[cf_obj["type"]]],cf_obj["inf"],cf_obj["action"],cf_obj["gl"],cid_count)
            cid_count+=1
        }
    }
    function create_cf(){
            create_newCF("","","","",100,charData["rule"].length)
            charData["rule"].push({
                "type":"",
                "inf":"",
                "action":"",
                "gl":100,
            },)
        }
    async function change_charData(tag,inf){
        charData[tag]=inf
    }
    async function change_dialogData(dialogID,part,inf){
        charData["chat"][part]=inf
    }
    async function save_change(){
        loading("save")
        await dialog_editSave()
        await cf_save()
        await window.pywebview.api.save(charData)
        plug_css=`
        .char_helper_bar{
            width: 220px;
            height: 90px;
            background-color: ${charData["bg_color"]};
            border-radius: 30px;
            border: 8px solid ${charData["border_color"]};
        }
        .char_say_bar p{
            color: ${charData["font_color"]};
            font-family: "GenshinFont";
        }
        .char_img{
            width: 150px;
            height: 150px;
            margin-bottom: -120px;
            margin-left: -80px;
        }
        `
        await window.pywebview.api.writeCSS(charData["char_id"],plug_css)
        clearLoading("save")
    }
    async function change_banner(e){
        await changeCharImage(e)
        charData['banner']=await src_to_path(e.children[0].src)
    }
    charData = {}
    window.addEventListener('pywebviewready',async function() {
        charData = await window.pywebview.api.get_char_data()
        await start_load()
        window.this_id = await window.pywebview.api.get_char_data()["char_id"]
        document.getElementById("name_input").value=charData['char_name']
        document.getElementById("id_input").value=charData["char_id"]
        document.getElementById('i_input').value=charData["introduce"]
        document.getElementById('Charcolor_input').value=charData['font_color']
        document.getElementById("color_input").value=charData['border_color']
        document.getElementById("BGcolor_input").value=charData['bg_color']
        if(charData["banner"]!=""){
            document.getElementById("char_banner").src="char/"+charData["char_id"]+'/'+charData["banner"]
        }
    })
    async function dialog_editSave(){
        dialog_edit_Card=document.getElementById("dialog_cards")
        chatData_dict = {}
        for(de of dialog_cards.children){
            chat_dict = {}
            this_dialog_item=[]
            for(dialog_item_e of de.children[1].children){
                this_dialog_item.push({
                    "time":parseInt(dialog_item_e.children[0].children[1].children[1].value),
                    "msg":{
                        "char_img":await src_to_path(dialog_item_e.children[0].children[0].children[0].children[0].src),
                        "msg":dialog_item_e.children[0].children[2].children[1].value.split(",")
                    }
                })
            }
            chat_dict["content"]=this_dialog_item
            chat_dict["voice"]=await src_to_path(de.children[0].children[2].src)
            chat_dict["type"]=dialog_type_options[de.children[0].children[4].value]
            chat_dict["voice_time"]=parseInt(de.children[0].children[2].duration*1000)
            chatData_dict[de.children[0].children[1].value]=chat_dict
        }
        charData["chat"]=chatData_dict
    }
    async function cf_save(){
        cf_list = []
        for(cf_e of cf_bar.children){
            this_cf = {
                "type":options_match_back[cf_e.children[0].children[0].children[0].value],
                "inf":cf_e.children[0].children[1].children[0].value,
                "action":action_match_back[cf_e.children[0].children[2].children[0].value],
                "gl":cf_e.children[0].children[3].children[0].value
            }
            cf_list.push(this_cf)
        }
        charData["rule"]=cf_list
    }
    var confirmPushDialog = new mdui.Dialog('#confirmPushDialog');
    
    // 修改push_char函数
    async function push_char(){
        
        // 先填充确认对话框内容
        document.getElementById('confirmCharName').textContent = charData['char_name'];
        document.getElementById('confirmCharIntro').textContent = charData['introduce'];
        
        // 显示对话框
        confirmPushDialog.open();
    }
    
    // 添加确认按钮事件监听
    var publishingDialog = new mdui.Dialog('#publishingDialog', {
        modal: true,
        closeOnEsc: false,
        closeOnConfirm: false
    });
    let pushing = false;
    document.getElementById('confirmPushBtn').addEventListener('click', async function() {
        if(pushing==true) return;
        pushing = true;
        loading("push");
        
        try {
            confirmPushDialog.close();
            publishingDialog.open()
            var r = await window.pywebview.api.upload_char();
            if(r["success"] == false){
                pushing = false;
                mdui.snackbar({
                    message: r["msg"],
                    position: 'left-bottom',
                });
                publishingDialog.close()
            } else {
                pushing = false;
                mdui.snackbar({
                    message: '角色发布成功！',
                    position: 'left-bottom',
                });
                publishingDialog.close()
            }
        } catch (e) {
            pushing = false;
            mdui.snackbar({
                message: '发布过程中出现错误: ' + e.message,
                position: 'left-bottom',
            });
        } finally {
            clearLoading("push");
            pushing = false;
            confirmPushDialog.close();
        }
    });
</script>